<!--五星评分-->
<template>
  <el-rate
    v-model="value"
    v-bind="$attrs"
    :id="'c' + meta.columnId"
    :name="'c' + meta.columnId"
    :clearable="clearable"
  >
  </el-rate>
  <circle-close-filled v-if="clearable"
    style="width: 1.2em; height: 1.2em; margin-top: -2px; margin-left: 5px;cursor: pointer;"
    @click.stop="myclear" 
  />
</template>

<script setup lang="ts" generic="T extends object">
  import type { IFormItemProps } from '../../map'
  import { itemController } from '../../map'
  import { CircleCloseFilled } from '@element-plus/icons-vue'

  defineOptions({
    name: 'nf-el-form-item-rate',
    inheritAttrs: false,
  })

  const props = withDefaults(defineProps<IFormItemProps<T>>(), {
    meta: () => {
      return {
        colName: ''
      }
    },
    model: () => {
      return {} as T
    },
    clearable: true
  })

  // 五星评分
  const { value  } = itemController(props)

  // 设置默认值
  if (props.meta.defValue) {
    value.value = props.meta.defValue
  }

  // 设置默认值
  if (props.meta.defValue) {
    value.value = props.meta.defValue
  }
  const myclear = () => {
    value.value = null
  }
 
</script>
